<template>
    <div class="body">
        <Header class="head">
            <li slot="top"> <span class="iconfont icon-icon-arrow-left4" @click="jump_login()"></span></li>
            <li slot="top"><span class="iconfont icon-gengduo"></span></li>
        </Header>
        <section>
            <h1>注册</h1>
            <p>注册登录后，订阅·你感兴趣的内容、关注作者、发表评论，添加收藏笔记</p><br>
        
            <label for=""><p>用户名：</p><input class="input" type="text" placeholder=" 请输入用户名" v-model="username"></label>
            <br>
            <label for=""><p>密  码：</p><input class="input" type="password" placeholder=" 请输入密码" v-model="password"></label>
            <br>
            
            <label for=""><p>确认密码：</p><input class="input" type="password" placeholder=" 请输入确认密码" v-model="cfpassword"></label>
           
           
            <h4>
                注册意味着你已阅读并同意<span>用户使用协议 </span>和<span>隐私条款</span>
            </h4>
            <button @click="register()">注 册</button>
        </section> 
        <footer>
            <keep-alive><p>已有账号？ <router-link to="/login"> 点我去登录 </router-link> </p> </keep-alive>
        </footer>
    </div>
</template>

<script>
export default {
    date(){
        return{
            username:"",
            password:"",
            cfpassword:"",
        }
    },
    methods:{
        register(){
            if(!this.username || !this.password || !this.cfpassword){
                alert("不能为空")
            }else{

                if(this.password === this.cfpassword){
                    localStorage.setItem("username",this.username)
                    localStorage.setItem("password",this.password)
                    this.$router.push("/login")
                }else{
                    alert("密码不一致，请重输")
                }
            }
        },
        jump_login(){
            this.$router.push("/login")
        }
    }
}
</script>

<style scoped lang="scss">
// header{
//     margin: .4rem  0 0 0;
//     p{
//         margin-left: .2rem;
//         height: .35rem;
//         line-clamp: .35rem;
//         font-size: .16rem;
//     }
// }
.body{
    background: url("../../public/images/bg.jpg") no-repeat 0.4rem -3.9rem;
    background-size: 100%;
}


.head{
    margin: .15rem  0 0 0;
    display: flex;
    justify-content: space-between;
    .iconfont{
        font-size: .18rem;
        margin: .15rem .14rem;
    }
}

section{
    text-align: center;
    box-sizing: border-box;
    padding: .3rem .2rem 0 .2rem;
    h1{
        text-align: center;
        font-size: .3rem;
        font-weight: none;
        margin: .1rem 0 .2rem 0;
        overflow: hidden;
    }
    p{
        text-align: center;
        display:inline-block;
        width: 1.9rem;
    }
    h4{
        font-size:0.12rem;
        font-weight: normal;
        margin: .3rem 0 .1rem 0;
        color: #5a5a5a;
        font-size: .12rem;
    }
    h4 span{
        color: #121212;
        text-decoration: underline;
    }
    label{
        display: flex;
        justify-content: space-between;
        font-size: .14rem;
        margin: -0.03rem 0;
    }
    label p{
        flex: 1.5;
        line-height: .35rem;
    }
    .input{
        flex: 3;
        height: .3rem;
        width: 2rem;
        border: 1px solid #666666;
        // margin-right: .05rem;

    }
    button{
        width: 100%;
        height: .46rem;
        border-radius: .25rem; 
        background:black;
        color: #ffffff;
        font-size:.14rem;
        // margin-top: .2rem;
    }
}
section label:nth-of-type(1){
    // display: block;
    margin-top: .4rem;
}
footer{
    p{
        text-align: center;
    }
    a{
        margin-top: .3rem;
        display: inline-block;
        color: #666666;
        text-decoration: underline;
    }
}
</style>